<template>
  <div>
    <div>
      <div>
        <h1 class="inline">社区管理</h1>


        <div class="inline add_button">
          <el-button plain @click="add_form_outside()">添加社区</el-button>
        </div>
      </div>
      <div style="clear:both"></div>

      <el-dialog title="社区信息填写" :visible.sync="dialogFormVisible">
        <el-form :model="new_comm" :rules="rules" ref="new_comm">
          <el-form-item label="社区名字" :label-width="formLabelWidth" prop="comm_name">
            <el-input v-model="new_comm.comm_name" placeholder="社区名字简写" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="社区位置" :label-width="formLabelWidth" prop="position">
            <el-input v-model="new_comm.position" placeholder="就像收货地址" autocomplete="off"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="20">
              <el-form-item label="社区管理员" :label-width="formLabelWidth" prop="comm_admin_id">
                <el-input v-model="new_comm.comm_admin_id" placeholder="请输入管理员ID,若为姓名请先查询ID"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button class="form_button" @click="getAdmin">查询ID</el-button>
            </el-col>
          </el-row>

          <el-form-item class="add_button_right">
            <el-button v-if="!new_comm.cid" type="primary" @click="add_form('new_comm')">添加社区</el-button>
          </el-form-item>


          <el-form-item class="add_button_right">
            <el-button v-if="new_comm.cid" type="primary" @click="update_form('new_comm')">更新社区</el-button>
          </el-form-item>

        </el-form>


      </el-dialog>


    </div>

    <div>
      <el-row>
        <el-col :span="8" v-for="comm in comms" :key="comm.cid">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ comm.comm_name }}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="update_comm(comm.cid)">修改
                </el-button>
              </div>
              <div class="text item">
                <p>{{ comm.position }}</p>
                <br>
                <p>管理员：{{ comm.comm_admin_name }} </p>
              </div>

              <baidu-map class="bm-view" :center="comm.center" :zoom="15">
                <bm-marker :position="comm.center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
              </baidu-map>

            </el-card>
          </div>
        </el-col>


      </el-row>
    </div>

  </div>
</template>

<script>
export default {
  name: "CommManagement",
  inject: ['reload'],

  data() {
    return {

      rules: {
        // name: [
        //   {required: true, message: '请输入活动名称', trigger: 'blur'},
        //   {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        // ],

        comm_name: {required: true, message: '不能为空', trigger: 'blur'},


        position: {required: true, message: '不能为空', trigger: 'blur'},


        admin_name: [
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'},
          {message: '不能为空', trigger: 'blur', required: true}
        ]


      },


      comms: [],

      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      new_comm: {},

      center: {
        lat: 29.526479663090585,
        lng: 106.71772609005032
      },
      zoom: 12,

      // is_addible: false,

      // is_update: false

    }
  },

  methods: {
    add_form_outside() {
      this.dialogFormVisible = true
      this.new_comm = {}

    },

    update_form(new_comm) {

      this.$refs[new_comm].validate((valid) => {
        if (valid) {


          this.axios({
            method: "post",
            url: "/comm/updateCommunity",
            data: this.new_comm
          }).then(resp => {
            if (resp) {
              if (resp.data.code == 200) {
                this.$message({
                  message: '更新成功',
                  type: 'success'
                });

                this.reload()
              }
            } else {
              this.$message({
                message: '更新失败',
                type: 'error'
              });
            }
          })

        }
      })
    },

    update_comm(cid) {

      this.axios({
        method: "get",
        url: "/comm/getCommByCid/" + cid,
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.new_comm = resp.data.data;
            this.new_comm.admin_name = resp.data.data.comm_admin_name;

          }
        }
      })

      this.dialogFormVisible = true

      this.is_update = true
    },

    getAdmin() {
      this.axios({
        method: 'get',
        url: '/user/getUserWithRoleByUsername/' + this.new_comm.comm_admin_id
      }).then(resp => {
        if (resp.data.data != null) {
          this.new_comm.comm_admin_id = resp.data.data.uid
        }
      })
    },

    add_form(new_comm) {


      this.$refs[new_comm].validate((valid) => {
        if (valid) {

          this.axios({
            method: "post",
            url: "/comm/addCommunity",
            data: this.new_comm
          }).then(resp => {
            if (resp) {
              if (resp.data.code == 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });

                this.reload()
              } else {
                this.$message({
                  message: '添加失败，请转换ID',
                  type: 'error'
                });
              }
            }
          })


        } else {
          console.log('error submit!!');
          return false;
        }
      });


      /* this.axios({
         method: 'post',
         url: ''
       }).then(resp => {

       })*/
    },

    getAllComms() {
      //只有最高admin才可以
      this.axios({
        method: "get",
        url: "/comm/getAllCommsWithAdmin",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            let promises = [];
            for (let comm of resp.data.data) {
              promises.push(this.axios({
                method: "get",
                url: "/api/getLongitudeadnlatitudeByZhname/" + comm.position,
              }).then(res => {
                comm.center = res.data.data.result.location
                // console.log(comm.center)
                // comm.center =  {
                //   "lng": 113.91956101545851,
                //   "lat": 22.519643785893273
                // }
              }))
            }
            Promise.all(promises).then(res => {
              this.comms = resp.data.data
            });

            // console.log("comms" + resp.data.data)
          }
        }
      })
    }
  },


  created() {
    this.getAllComms()
  }
}
</script>

<style scoped>
.container {
  /*width: 100vw;*/
}

.box-card {
  /*width: 480px;*/
  /*margin-top: 20px;*/
  margin: 10px;
}

.bm-view {
  height: 180px;

}

.inline {
  display: inline;

}

.add_button {
  /*display: inline-block;
  margin-right: 0;*/

  /*text-align: right;*/

  float: right;
}

.form_button {
  float: right;
  margin-right: 10px;
}

.add_button_right {
  text-align: right;
}


.my-dialog {
  padding-top: 20px;
  padding-bottom: 20px;
}

</style>
